<template>
    <div class="my-proposal">
        <div class="head">
            <div class="item bold" :class="{ active: index == 1 }" @click="index = 1">
                <span>处理中</span>
                <div class="line"></div>
            </div>
            <div class="item bold" :class="{ active: index == 2 }" @click="index = 2">
                <span>已处理</span>
                <div class="line"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "ProposalMy",
    data() {
        return {
            index: 1,
        }
    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>
.my-proposal {
    min-height: 100vh;
    background-color: #f7f7f7;

    .head {
        padding-top: 10px;
        background-color: white;
        border-bottom: 1px solid #efefef;

        .item {
            display: inline-block;
            width: 50%;
            text-align: center;
            padding-top: 10px;
            position: relative;

            &.active {
                span {
                    color: red;
                }

                .line {
                    transform: translateX(-50%) scale(1);
                }
            }

            span {
                display: inline-block;
                margin-bottom: 10px;
                color: black;
                transition: .4s;
            }

            .line {
                position: absolute;
                width: 50px;
                height: 1px;
                background-color: red;
                left: 50%;
                transform: translateX(-50%) scale(0);
                transform-origin: center center;
                transition: all .4s;
            }
        }
    }
}
</style>